.header-container {
  -webkit-transition: all .3s;
  transition: all .3s;
  background: #fff;
  -webkit-box-shadow: 0 2px 8px #f0f1f2;
  box-shadow: 0 2px 8px #f0f1f2;
  position: relative;
  z-index: 10;
  max-width: 100%;
  height: 64px;
  line-height: 70px;
  .header-title {
    width: 300px;
    font-size: 20px;
    font-weight: bold;
    margin-left: 70px;
    transform-style: preserve-3d;
  }
  .letter{
    display: inline-block;
    font-weight: bold;
    font-size: 32px;
    margin: 0 2px;
    position: relative;
    color: #00B4F1;
    transform-style: preserve-3d;
    perspective: 400;
    z-index: 1;
  }
  .letter:before, .letter:after{
    position:absolute;
    content: attr(data-letter);
    transform-origin: top left;
    top:0;
    left:0;
  }
  .letter, .letter:before, .letter:after{
    transition: all 0.3s ease-in-out;
  }
  .letter:before{
    color: #fff;
    text-shadow:
      -1px 0px 1px rgba(255,255,255,.8),
      1px 0px 1px rgba(0,0,0,.8);
    z-index: 3;
    transform:
      rotateX(0deg)
      rotateY(-15deg)
      rotateZ(0deg);
  }
  .letter:after{
    color: rgba(0,0,0,.11);
    z-index:2;
    transform:
      scale(1.08,1)
      rotateX(0deg)
      rotateY(0deg)
      rotateZ(0deg)
      skew(0deg,1deg);
  }
  .letter:hover:before{
    color: #fafafa;
    transform:
      rotateX(0deg)
      rotateY(-40deg)
      rotateZ(0deg);
  }
  .letter:hover:after{
    transform:
      scale(1.08,1)
      rotateX(0deg)
      rotateY(40deg)
      rotateZ(0deg)
      skew(0deg,22deg);
  }
}
